import { Typography } from 'antd';
import React, { useState, useEffect } from 'react'
import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import * as prism from 'react-syntax-highlighter/dist/esm/styles/prism'
import * as hljs from 'react-syntax-highlighter/dist/esm/styles/hljs';
import mdUrl from './doc.md'
import style from './index.module.css'
const { Paragraph } = Typography;


function render(obj, md) {
    return Object.keys(obj).map(key => {
        return (
            <div className={style.kuai} key={key}>
                <Paragraph className={style.title} id={key} copyable>{key}</Paragraph>
                {/* <div className={style.title} id={key}>{key}</div> */}
                <div className={style.md_content}>
                    <ReactMarkdown children={md}
                        remarkPlugins={[[gfm, { singleTilde: false }]]}
                        components={{
                            code({ node, inline, className, children, ...props }) {
                                const match = /language-(\w+)/.exec(className || '')
                                return !inline && match ? (
                                    <SyntaxHighlighter
                                        children={String(children).replace(/\n$/, '')}
                                        style={obj[key]}
                                        language={match[1]}
                                        PreTag="div"
                                        {...props}
                                    />
                                ) : (
                                    <code className={className} {...props}>
                                        {children}
                                    </code>
                                )
                            }
                        }} />
                </div>
            </div>
        )
    })
}

export default function Comp() {
    const [Obj, setMd] = useState({ prism: [], hljs: [] })
    useEffect(() => fetch(mdUrl).then(r => r.text()).then(m => {
        setMd({ prism: render(prism, m), hljs: render(hljs, m) })
    }), [])
    return (<div className={style.conteiner}>
        <div className={style.area} >
            <h2>prism</h2>
            {Obj.prism}
        </div>
        <div className={style.area}>
            <h2>hljs</h2>
            {Obj.hljs}
        </div>
    </div>)
}
